<template>
  <div class="app-container">
    <div class="dashboard-page">
      <!-- 顶部用户信息和统计 -->
      <el-card class="dashboard-header">
        <div slot="header" class="clearfix" style="line-height: 40px; height: 40px">
          <label class="">工作台</label>
        </div>
        <div class="dashboard-card-body">
          <div class="user-info">
            <img :src="$store.getters.avatar" alt="User Avatar" class="avatar" />
            <div class="greeting">
              <h2>
                {{ $store.getters.name }}，{{
                  timeOfDay
                }}好！开始您一天的工作吧！
              </h2>
              <p>您于 {{ $store.getters.createTime }} 加入了公司</p>
            </div>
          </div>
          <div class="summary-stats" >
            <div class="stat-item" @click="headerToOrderIndex(null)">
              <span class="label">商机数</span>
              <span class="value">{{ projectNumberAndTodoAndRenewed.orderCount || 0 }}</span>
            </div>
            <div class="stat-item" @click="toDoPageIndex()">
              <span class="label">待办</span>
              <span class="value">{{ total }}</span>
            </div>
            <div class="stat-item" @click="headerToOrderIndex('0')">
              <span class="label">待续费</span>
              <span class="value">{{ projectNumberAndTodoAndRenewed.isRenewalCount || 0 }}</span>
            </div>
          </div>
        </div>
      </el-card>
      <div class="filter-section">
        <div class="filter-header" @click="toggleFilters">
          <label>筛选条件</label>
          <div>
            <el-button type="text" icon="el-icon-search" @click.stop="handleQuery">搜索</el-button>
            <el-button type="text" icon="el-icon-refresh" @click.stop="resetQuery" style="margin-right: 20px">重置</el-button>
            <i :class="['el-icon-arrow-down', { 'is-active': showFilters }]"></i>
          </div>
        </div>

        <el-collapse-transition>
          <div v-show="showFilters" class="filter-content">
            <el-form :model="queryParams" ref="queryForm" label-width="80px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="年份">
                    <el-date-picker v-model="queryParams.year" type="year" placeholder="选择年" value-format="yyyy-MM-dd"
                      style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="季度">
                    <quarter-picker v-model="queryParams.quarter" value-format="yyyy-MM-dd" width = "100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="月份">
                    <el-date-picker v-model="queryParams.month" type="month" placeholder="选择月" value-format="yyyy-MM-dd"
                      style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属人">
                    <el-select v-model="queryParams.userId" placeholder="请选择所属人" style="width: 100%" filterable
                      clearable>
                      <el-option v-for="user in userList" :key="user.userId" :label="user.userName"
                        :value="user.userId" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12" v-if="$auth.hasRoleOr(['sdl', 'gl'])">
                  <el-form-item label="所属组">
                    <el-select v-model="queryParams.groupId" placeholder="请选择所属小组" style="width: 100%" filterable clearable>
                      <el-option v-for="dict in getGroupList()" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="$auth.hasRoleOr(['sdl'])">
                  <el-form-item label="所属部门" prop="deptId">
                    <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true"
                      placeholder="请选择归属部门" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-transition>
      </div>

      <!-- 四个统计卡片 -->
      <div class="stats-container">
        <div class="stats-left">
          <div>
            <LineChartPc class="chart" :dataInfo="performance" @toIndex="chartToOrderIndex"></LineChartPc>
            <BarChartPc class="chart" :dataInfo="actualSpending" @toIndex="chartToOrderIndex"></BarChartPc>
          </div>
        </div>
        <div class="stats-right">
          <div class="chart-container" style="margin-bottom: 40px">
            <div>
              <el-row>
                <el-col :span="16">
                  <el-row>
                    <el-col :span="24">
                      <div class="grid-content">
                        <div style="font-size: 16px">年度目标利润</div>
                      </div>
                    </el-col>
                    <el-col :span="24">
                      <div class="grid-content">
                        <span style="font-size: x-large">{{target}} 元</span>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="grid-content">
                        <div>
                          <span class="text-content"> 预计利润 </span>
                          {{ performance.profit || 0 }}
                          <span class="unit">元</span>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="grid-content">
                        <div>
                          <span class="text-content"> 完成率 </span>
                          {{ (performance.profit / this.target * 100).toFixed(2) || 0}} %
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <svg t="1734610576893" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="54562" width="128" height="128">
                    <path
                      d="M678.8 321.022c-7.929 6.427-15.779 12.849-23.694 19.192-11.638 9.328-23.377 18.53-34.969 27.914-11.086 8.974-21.984 18.181-33.067 27.159-9.927 8.042-20.048 15.845-29.984 23.876-10.971 8.867-21.781 17.933-32.748 26.8-15.427 12.478-30.847 24.969-46.474 37.194a40.462 40.462 0 0 1-12.261 6.786c-6.206 1.977-12.17-0.1-16.48-4.879-6.507-7.214-12.566-14.837-18.712-22.371-9.174-11.246-18.249-22.573-27.388-33.847-2.586-3.19-5.248-6.317-8.426-10.134-2.9 2.19-6 4.4-8.958 6.779q-17.613 14.192-35.149 28.479c-11.177 9.1-22.291 18.274-33.481 27.357q-22.563 18.315-45.2 36.546c-12.991 10.523-25.93 21.111-38.942 31.608-13.791 11.125-27.552 22.29-41.505 33.209-5.99 4.688-12.965 4.8-19.7 1.858-6.849-2.989-10.994-8.556-11.117-16.119-0.486-29.988-0.759-59.98-0.976-89.971-0.043-6.016 3.139-10.731 7.621-14.419q26.937-22.165 54.023-44.149c18.795-15.29 37.675-30.475 56.446-45.793 17.509-14.289 34.885-28.74 52.39-43.034q27.967-22.836 56.063-45.514c2.956-2.4 5.827-4.913 8.877-7.185 9.679-7.209 21.418-5.813 29 3.585 10.409 12.9 20.6 25.972 31.007 38.869 6.6 8.176 13.424 16.169 20.6 24.791l133.59-108.143c-8.281-9.79-16-19.238-24.067-28.374-11.385-12.889-6.18-28.233 6.5-33.45 4.6-1.893 10.048-1.905 15.145-2.4 16.014-1.539 32.059-2.758 48.067-4.356 27.27-2.722 54.519-5.65 81.779-8.467 10.595-1.095 21.178-2.394 31.8-3.116 14.158-0.962 24.064 12.642 19.713 26.9-6.059 19.858-12.323 39.652-18.463 59.485q-15.076 48.693-30.115 97.4c-3.489 11.261-11.29 17.756-21.559 16.671-4.226-0.447-9.222-2.451-12.071-5.452-9.304-9.787-17.777-20.368-27.115-31.285z m87.077-132.1l0.732-1.85 2.317-9.637-170 16.851 38.455 45.964-164.906 133.483-64.8-79.942c-5.544 4.366-10.8 8.36-15.894 12.543-15.72 12.9-31.318 25.948-47.079 38.8-20.488 16.7-41.137 33.211-61.621 49.92-15.758 12.854-31.331 25.934-47.052 38.834-17.889 14.679-35.89 29.222-53.708 43.987a8.394 8.394 0 0 0-2.73 5.589c-0.21 9.825 0 19.66 0.069 29.491-0.036 5.491-0.108 10.982-0.1 16.474 0.017 10.823 0.022 21.646 0.208 32.466 0.019 1.1 1.244 2.18 1.91 3.269 6.7-5.6 13.331-11.286 20.127-16.766 11.386-9.181 22.939-18.155 34.312-27.351 13.048-10.55 25.932-21.3 38.972-31.865 13.294-10.767 26.738-21.349 40.031-32.117 13.04-10.562 25.934-21.306 38.966-31.878 13.4-10.868 26.941-21.551 40.271-32.5 2.4-1.967 3.347-2.12 5.372 0.523 6.028 7.869 12.506 15.393 18.748 23.1 10.715 13.23 21.368 26.51 32.083 39.74 3.9 4.812 7.9 9.541 11.877 14.336 8.115-6.616 15.639-12.742 23.154-18.878 11.1-9.059 22.152-18.165 33.286-27.177 9.837-7.963 19.793-15.779 29.631-23.741 11.261-9.113 22.419-18.353 33.679-27.467 9.7-7.851 19.524-15.552 29.219-23.412 9.585-7.77 19.026-15.718 28.623-23.472 11.37-9.187 22.765-18.348 34.294-27.333 7.621-5.939 6.459-7.5 12.625 0.808 1.379 1.858 3.051 3.5 4.549 5.27 9.023 10.684 18.035 21.377 27.746 32.89L756.9 217.917l0.714-1.825 3.316-11.192 0.694-1.791 3.327-11.219 0.684-1.745z"
                      fill="#353842" p-id="54563"></path>
                    <path
                      d="M832.594 645.285q0 86.735-0.025 173.47c-0.053 34.266-21.739 61.616-54.794 69.489-38.881 9.26-78.924-18.221-84.24-57.879a94.176 94.176 0 0 1-0.9-12.43q-0.072-172.97-0.026-345.94c0.01-34.978 21.527-62.371 55.049-70.3 38.565-9.127 78.837 18.506 83.965 57.7a108.55 108.55 0 0 1 0.935 13.927q0.089 85.978 0.036 171.963zM762.543 869.88c3.951-0.32 8.027-0.122 11.831-1.046 22.927-5.566 38.389-26.6 38.341-49.088-0.252-117.331-0.1-234.662-0.14-351.993a41.281 41.281 0 0 0-1.005-8.856c-5.331-24.022-27.936-40.107-49.027-38.777-3.623 0.294-7.3 0.28-10.859 0.933-21.3 3.913-39.121 25.45-39.117 46.949l0.069 350.994a66.537 66.537 0 0 0 1.01 11.866c4.061 22.232 26.454 40.021 48.897 39.018zM512.593 689.636c0-42.824-0.076-85.649 0.024-128.473 0.08-34.223 21.788-61.556 54.871-69.428 38.858-9.246 78.812 18.241 84.172 57.975a93.716 93.716 0 0 1 0.9 12.43q0.076 127.974 0.025 255.947c-0.017 34.937-21.593 62.341-55.124 70.243-38.572 9.091-78.729-18.532-83.9-57.793a108.406 108.406 0 0 1-0.929-13.927q-0.103-63.487-0.039-126.974z m81.927 179.272l3.323-1.035c20.427-6.354 35.012-27.183 34.918-48.258-0.39-87.116-0.185-174.236-0.127-261.354 0.017-26.5-24.86-49.8-50.09-48.143-25.855-1.146-49.984 21.989-49.976 47.813q0.041 131.374 0.061 262.748c0.021 19.354 9.413 33.551 25.743 43.2 11.228 6.639 23.518 7.511 36.147 5.03z"
                      fill="#343741" p-id="54564"></path>
                    <path
                      d="M472.595 735.278c0 28.16 0.155 56.321-0.042 84.479-0.234 33.533-22.131 60.727-54.773 68.487-38.9 9.249-78.866-18.172-84.252-57.862a85.992 85.992 0 0 1-0.9-11.43q-0.085-83.98-0.009-167.959c0.069-34.315 22.2-61.825 55.5-69.45 38.4-8.792 78.38 18.818 83.457 57.833a159.9 159.9 0 0 1 0.971 19.92c0.112 25.327 0.053 50.654 0.048 75.982z m-70.008 134.554c25.931 0.793 49.662-21.244 49.847-47.655q0.61-87.173 0-174.353c-0.183-26.4-23.92-48.444-49.848-47.655-25.647-0.906-49.647 21.143-49.827 47.125q-0.605 87.7 0 175.413c0.184 25.993 24.186 48.035 49.828 47.125zM292.594 760.259c0 19.994 0.207 39.991-0.046 59.982-0.514 40.629-33.506 71.519-74.085 69.629-34.8-1.621-64.9-31.036-65.554-65.9q-1.195-63.957 0-127.953c0.647-34.846 30.729-64.227 65.575-65.884 36.674-1.744 68.263 23.987 73.2 59.715a94.372 94.372 0 0 1 0.879 12.429c0.083 19.323 0.037 38.654 0.031 57.982z m-70.051-110.138c-3.788 0.31-7.648 0.257-11.353 0.989-21.335 4.215-38.647 25.646-38.622 47.393 0.047 40.331 0 80.662 0.071 120.993a64.082 64.082 0 0 0 1 11.366c4.07 22.227 26.456 40.016 48.9 39.015 25.212 1.662 50.135-21.626 50.089-48.154q-0.107-61.724 0-123.448c0.05-26.524-24.87-49.816-50.085-48.154z"
                      fill="#353842" p-id="54565"></path>
                    <path
                      d="M760.931 204.9l-3.313 11.186-0.713 1.825-37.656 119.96c-9.71-11.514-18.722-22.207-27.746-32.89-1.5-1.773-3.17-3.412-4.549-5.27-6.166-8.308-5-6.747-12.625-0.808-11.53 8.985-22.924 18.146-34.294 27.333-9.6 7.754-19.038 15.7-28.623 23.472-9.695 7.859-19.518 15.56-29.219 23.412-11.261 9.113-22.419 18.354-33.679 27.467-9.838 7.962-19.793 15.778-29.631 23.741-11.133 9.012-22.19 18.118-33.286 27.177-7.515 6.136-15.039 12.262-23.154 18.878-3.977-4.795-7.979-9.523-11.877-14.336-10.715-13.23-21.368-26.511-32.083-39.74-6.242-7.707-12.72-15.23-18.748-23.1-2.025-2.643-2.977-2.49-5.372-0.523-13.33 10.946-26.876 21.63-40.271 32.5-13.032 10.573-25.926 21.316-38.966 31.878-13.294 10.768-26.737 21.35-40.031 32.117-13.04 10.561-25.924 21.314-38.972 31.865-11.374 9.2-22.926 18.17-34.312 27.351-6.8 5.48-13.424 11.17-20.127 16.766a28.365 28.365 0 0 1-0.988-5.139c-0.134-13.931-0.125-27.863-0.243-41.794a36.968 36.968 0 0 0-0.788-5.276c-0.065-9.831-0.279-19.666-0.069-29.491a8.394 8.394 0 0 1 2.73-5.589c17.817-14.765 35.819-29.308 53.708-43.987 15.721-12.9 31.294-25.98 47.052-38.834 20.484-16.709 41.133-33.216 61.621-49.92 15.76-12.85 31.359-25.9 47.079-38.8 5.1-4.183 10.35-8.177 15.894-12.543l64.8 79.942 164.91-133.479-38.46-45.961 170-16.851-2.317 9.636-0.732 1.851-0.242 1.222-0.684 1.746-3.328 11.218z"
                      fill="#F46752" p-id="54566"></path>
                    <path
                      d="M179.662 512.953a36.97 36.97 0 0 1 0.788 5.276c0.118 13.931 0.109 27.863 0.243 41.794a28.365 28.365 0 0 0 0.988 5.139c-0.666-1.089-1.891-2.169-1.91-3.269-0.187-10.82-0.191-21.644-0.208-32.466-0.008-5.491 0.064-10.983 0.099-16.474z"
                      fill="#9E6F6C" p-id="54567"></path>
                    <path
                      d="M760.931 204.9l0.694-1.792zM756.9 217.917l0.713-1.825zM764.952 191.895l0.684-1.746zM765.878 188.927l0.732-1.851z"
                      fill="#383A44" p-id="54568"></path>
                    <path
                      d="M762.543 420.12c21.091-1.33 43.7 14.755 49.027 38.777a41.281 41.281 0 0 1 1.005 8.856c0.042 117.331-0.112 234.662 0.14 351.993 0.048 22.489-15.414 43.522-38.341 49.088-3.8 0.923-7.881 0.725-11.831 1.046q0.025-70.961 0.047-141.924-0.009-153.918-0.047-307.836z"
                      fill="#5A6286" p-id="54569"></path>
                    <path
                      d="M762.543 420.12q0.025 153.918 0.047 307.837 0 70.962-0.047 141.924c-22.442 1-44.836-16.786-48.9-39.017A66.537 66.537 0 0 1 712.636 819q-0.087-175.5-0.069-350.994c0-21.5 17.813-43.037 39.117-46.949 3.557-0.657 7.237-0.643 10.859-0.937zM594.519 868.909c-12.629 2.481-24.921 1.609-36.149-5.027-16.329-9.651-25.722-23.848-25.743-43.2q-0.143-131.374-0.061-262.748c-0.008-25.824 24.121-48.959 49.976-47.814l0.052 350.159c0 1.5-0.412 3.173 0.124 4.447a5.7 5.7 0 0 0 3.13 3.14 60.888 60.888 0 0 0 8.671 1.043z"
                      fill="#717B9A" p-id="54570"></path>
                    <path
                      d="M594.519 868.909a60.888 60.888 0 0 1-8.671-1.044 5.7 5.7 0 0 1-3.13-3.14c-0.536-1.274-0.124-2.948-0.124-4.447l-0.052-350.159c25.23-1.657 50.108 21.64 50.09 48.144-0.057 87.118-0.263 174.237 0.127 261.354 0.094 21.075-14.492 41.9-34.918 48.258z"
                      fill="#5A6286" p-id="54571"></path>
                    <path
                      d="M402.587 869.832c-25.642 0.911-49.644-21.134-49.825-47.125q-0.611-87.7 0-175.413c0.179-25.982 24.18-48.031 49.827-47.125q-0.002 134.831-0.002 269.663z"
                      fill="#FEE181" p-id="54572"></path>
                    <path
                      d="M402.587 869.832V600.169c25.928-0.789 49.665 21.259 49.848 47.655q0.6 87.173 0 174.353c-0.186 26.411-23.917 48.448-49.848 47.655z"
                      fill="#FEDB67" p-id="54573"></path>
                    <path
                      d="M222.543 650.121c25.215-1.663 50.135 21.63 50.089 48.154q-0.108 61.724 0 123.448c0.046 26.528-24.877 49.817-50.089 48.155V650.121z"
                      fill="#5A6286" p-id="54574"></path>
                    <path
                      d="M222.543 650.121v219.758c-22.444 1-44.83-16.789-48.9-39.016a64.082 64.082 0 0 1-1-11.366c-0.075-40.331-0.024-80.662-0.071-120.993-0.025-21.747 17.287-43.177 38.622-47.393 3.7-0.732 7.56-0.68 11.349-0.99z"
                      fill="#717B9A" p-id="54575"></path>
                  </svg>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="stats-right-card" style="margin-bottom: 20px">
            <div class="stats-card" @click="toOrderIndex('4')">
              <div class="stats-header">
                <h3>待成交</h3>
                <div class="trend">
                  <svg t="1734610282447" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="47123" width="32" height="32">
                    <path
                      d="M999.661 762.31L672.4 437.424a15.806 15.806 0 0 0 0-22.424l-11.289-11.214c6.29-6.263 14.395-9.342 22.578-9.342 2.7 0 5.502 0.304 8.077 1.012 11.014 2.877 22.802 0.098 30.91-7.958l74.165-73.634a47.477 47.477 0 0 0 0-67.372L615.914 66.881c-18.778-18.641-49.078-18.641-67.852 0l-74.164 73.634c-8.104 8.029-10.912 19.643-8.006 30.656 0.708 2.673 1.011 5.378 1.011 8.056 0 8.131-3.106 16.261-9.418 22.422L321.857 336.39a32.075 32.075 0 0 1-30.683 8.26c-11.009-2.882-22.801 0-30.878 7.925l-74.192 73.635a47.317 47.317 0 0 0 0 67.372l180.927 179.617c18.685 18.56 49.091 18.56 67.879 0l74.161-73.635c8.081-8.032 10.883-19.647 8.004-30.656a31.88 31.88 0 0 1-1.011-8.027c0-8.157 3.109-16.288 9.396-22.45l11.289 11.236c6.313 6.237 16.413 6.237 22.597 0L887.29 875.234c31.506 31.154 82.264 30.985 113.557-0.379 30.882-31.159 30.001-81.56-1.186-112.545zM559.249 145.563l11.285-11.209a15.957 15.957 0 0 1 22.601 0l135.73 134.768a15.66 15.66 0 0 1 0 22.422l-11.29 11.209c-2.993 3.003-8.302 1.697-11.298 4.692C581.091 432.6 584.085 435.603 581.091 432.6L426.435 303.476c-2.98-2.976 128.159-142.449 128.159-146.664a15.86 15.86 0 0 1 4.655-11.223v-0.026zM423.622 594.614l-11.312 11.213a15.961 15.961 0 0 1-11.291 4.674c-4.232 0-8.295-1.68-11.284-4.674L253.983 471.158a15.652 15.652 0 0 1 0-22.423l11.286-11.213a15.974 15.974 0 0 1 11.302-4.688c4.237 0 146.87-132.357 149.864-129.358L581.091 432.6c-11.202 12.839-152.822 146.662-152.822 150.854 0 4.188-1.676 8.206-4.647 11.16z m0 0"
                      fill="#714C26" p-id="47124"></path>
                    <path
                      d="M575.737 890.413v31.765c-0.111 26.393-21.585 47.71-47.978 47.626H47.978C21.488 969.804 0 948.463 0 922.178v-31.765c0.124-17.585 14.413-31.77 31.992-31.77 13.285 0 25.279-5.329 33.891-13.963l0.378-0.405c26.512-26.767 78.784-49.238 116.559-49.238h210.096c37.877 0 90.069 22.347 116.56 49.238l0.405 0.405c8.688 8.634 20.681 13.989 33.864 13.989 17.571 0.001 31.855 14.173 31.992 31.744z m0 0"
                      fill="#744D27" p-id="47125"></path>
                    <path
                      d="M485.44 863.154c14.253 0 25.839 11.496 25.951 25.751v25.766c-0.09 21.409-17.51 38.702-38.919 38.634H83.283c-21.488 0-38.918-17.312-38.918-38.634v-25.766c0.101-14.266 11.691-25.771 25.951-25.771m441.076 25.771"
                      fill="#FFFFFE" p-id="47126"></path>
                    <path
                      d="M495.431 863.154c14.253 0 25.839 11.496 25.951 25.751v25.766c-0.09 21.409-17.51 38.702-38.919 38.634H93.273c-21.488 0-38.918-17.312-38.918-38.634v-25.766c0.101-14.266 11.691-25.771 25.951-25.771m441.076 25.771"
                      fill="#DB9455" p-id="47127"></path>
                    <path
                      d="M89.303 851.809l0.307-0.33c21.506-21.711 63.908-39.941 94.55-39.941h170.425c30.726 0 73.062 18.129 94.55 39.941l0.328 0.33"
                      fill="#FFFFFF" p-id="47128"></path>
                    <path
                      d="M107.798 851.808l0.307-0.329c21.506-21.712 63.908-39.941 94.55-39.941H373.08c30.726 0 73.062 18.128 94.55 39.941l0.328 0.329"
                      fill="#F2B683" p-id="47129"></path>
                    <path
                      d="M563.928 519.465l288.437 284.023c75.545 73.436 101.827 74.264 128.042 47.989 25.87-26.103 19.448-53.358-6.677-79.314l-30.939-31.211-298.367-300.983"
                      fill="#CA803E" p-id="47130"></path>
                    <path
                      d="M638.294 401.849c5.27-5.247 12.059-7.826 18.914-7.826 2.262 0 4.609 0.254 6.767 0.848 9.226 2.411 19.101 0.082 25.894-6.666l62.129-61.684a39.771 39.771 0 0 0 0-56.438L600.432 119.62c-15.73-15.615-41.113-15.615-56.84 0l-62.128 61.684c-6.79 6.726-9.141 16.455-6.707 25.681 0.593 2.239 0.847 4.505 0.847 6.748 0 6.812-2.602 13.622-7.89 18.784L354.097 345.391a26.868 26.868 0 0 1-25.703 6.919c-9.223-2.415-19.101 0-25.867 6.639l-62.151 61.685a39.638 39.638 0 0 0 0 56.438l151.565 150.467c15.652 15.548 41.124 15.548 56.863 0l62.125-61.685c6.77-6.729 9.117-16.459 6.705-25.681a26.769 26.769 0 0 1-0.847-6.725c0-6.833 2.605-13.645 7.871-18.807m28.305-329.109l9.454-9.39a13.363 13.363 0 0 1 9.467-3.929c3.55 0 6.957 1.414 9.466 3.929l113.703 112.897a13.12 13.12 0 0 1 0 18.784l-9.458 9.39a13.37 13.37 0 0 1-9.465 3.931 13.37 13.37 0 0 1-9.468-3.931L552.963 204.361a13.284 13.284 0 0 1 0-18.805v-0.024zM439.347 561.708l-9.476 9.393a13.366 13.366 0 0 1-9.458 3.916 13.357 13.357 0 0 1-9.453-3.916L297.238 458.287a13.107 13.107 0 0 1 0-18.784l9.454-9.394a13.382 13.382 0 0 1 9.468-3.927c3.549 0 6.957 1.415 9.464 3.927l113.722 112.896a13.193 13.193 0 0 1 3.893 9.353 13.19 13.19 0 0 1-3.892 9.35z m0 0"
                      fill="#CA803E" p-id="47131"></path>
                  </svg>
                </div>
              </div>
              <div class="stats-value">{{ todo.awaitDeal || 0 }} 个</div>
            </div>

            <div class="stats-card">
              <div class="stats-header" @click="toOrderIndex('5')">
                <h3>待验收</h3>
                <div class="trend">
                  <svg t="1734609853667" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="26798" width="32" height="32">
                    <path
                      d="M12.768 165.301333h1003.776V1024H12.768zM20.522667 154.442667H1024L824.106667 0.885333H220.416L20.522667 154.442667z"
                      fill="#040000" p-id="26799"></path>
                    <path
                      d="M154.709333 970.357333a40.64 40.64 0 0 0 57.557334-0.266666l206.08-208.074667a225.365333 225.365333 0 0 0 118.304 33.386667c124.992 0 226.336-101.322667 226.336-226.304s-101.344-226.336-226.336-226.336c-124.96 0-226.314667 101.344-226.314667 226.336a225.28 225.28 0 0 0 47.370667 138.453333L154.442667 912.821333a40.661333 40.661333 0 0 0 0.266666 57.536z m220.256-396.16c0-90.826667 73.632-164.448 164.458667-164.448 90.837333 0 164.448 73.610667 164.448 164.448 0 90.816-73.610667 164.469333-164.448 164.469334-90.816 0-164.458667-73.578667-164.458667-164.469334z"
                      fill="#FBFCFD" p-id="26800"></path>
                  </svg>
                </div>
              </div>
              <div class="stats-value">{{ todo.awaitAcceptance || 0 }} 个</div>
            </div>
          </div>

          <div class="stats-right-card" style="margin-bottom: 20px">
            <div class="stats-card" @click="toOrderIndex('6')">
              <div class="stats-header" >
                <h3>待结算</h3>
                <div class="trend">
                  <svg t="1734609897997" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="30650" width="32" height="32">
                    <path d="M436.224 267.072m-170.88 0a170.88 170.88 0 1 0 341.76 0 170.88 170.88 0 1 0-341.76 0Z"
                      fill="#1296db" p-id="30651"></path>
                    <path
                      d="M510.464 745.984c0-91.648 50.56-170.688 124.8-213.184a385.92 385.92 0 0 0-193.984-53.056c-214.784 0-388.736 170.624-391.424 381.952h490.816a242.56 242.56 0 0 1-30.208-115.712zM908.032 788.416a30.72 30.72 0 0 1 0 61.312h-98.816v57.152a30.72 30.72 0 0 1-61.312 0v-57.28h-98.816a30.72 30.72 0 0 1 0-61.312h98.816v-41.664h-98.816a30.72 30.72 0 0 1 0-61.312h75.328l-66.944-66.88a30.528 30.528 0 1 1 43.264-43.264l77.824 77.824 77.824-77.824a30.528 30.528 0 1 1 43.264 43.264l-66.944 66.944h75.328a30.72 30.72 0 0 1 0 61.312h-98.816v41.664l98.816 0.064z"
                      fill="#1296db" p-id="30652"></path>
                  </svg>
                </div>
              </div>
              <div class="stats-value">{{ todo.awaitClear || 0 }} 个</div>
            </div>

            <div class="stats-card" @click="toOrderIndex('3')">
              <div class="stats-header">
                <h3>待跟进</h3>
                <div class="trend">
                  <svg t="1734610060658" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="37614" width="32" height="32">
                    <path
                      d="M904.533333 477.9008c0 38.7072-7.2704 75.912533-20.650666 110.626133C783.069867 877.090133 353.621333 904.533333 353.621333 904.533333s44.049067-45.056 60.5696-98.56C253.832533 765.013333 136.533333 633.6512 136.533333 477.9008 136.533333 289.416533 308.462933 136.533333 520.533333 136.533333S904.533333 289.416533 904.533333 477.9008zM590.4896 657.2032c24.661333 0 51.029333-17.800533 60.962133-25.344 7.867733-5.802667 33.8944-26.709333 33.8944-44.168533 0-7.202133-4.778667-15.086933-15.4112-25.344a227.2256 227.2256 0 0 0-29.098666-23.296c-10.9568-7.543467-22.272-14.728533-32.2048-19.8656-16.093867-8.567467-22.596267-9.591467-26.368-9.591467-7.867733 0-14.3872 4.096-19.524267 11.9808-3.754667 5.154133-6.5024 11.3152-8.9088 17.134933-1.706667 4.096-4.437333 10.615467-6.485333 13.021867-3.447467-1.024-12.3392-4.8128-27.0848-14.728533a319.266133 319.266133 0 0 1-40.055467-32.546134 313.207467 313.207467 0 0 1-32.546133-40.072533c-10.274133-14.728533-13.704533-23.637333-14.728534-27.050667 2.4064-2.065067 8.9088-4.795733 13.021867-6.519466 5.819733-2.730667 11.9808-5.12 17.117867-8.9088 7.8848-5.12 11.656533-11.9808 11.656533-19.524267 0-3.754667-0.682667-10.615467-9.250133-26.368-5.137067-9.9328-12.3392-21.230933-19.8656-32.187733-5.819733-8.226133-14.3872-19.8656-23.296-29.115734-10.274133-10.615467-18.141867-15.4112-25.344-15.4112-17.4592 0-38.3488 25.685333-44.1856 33.570134-7.5264 10.274133-25.344 36.642133-25.344 61.303466 0 22.9376 15.4112 52.736 28.433066 73.6256 17.117867 28.091733 41.096533 58.231467 67.1232 85.2992l8.567467 8.567467c27.050667 26.026667 57.1904 50.005333 85.282133 67.1232 20.8896 13.0048 50.688 28.416 73.642667 28.416z m-18.141867-186.658133h1.365334a7.748267 7.748267 0 0 0 6.144-8.9088 55.296 55.296 0 0 0-24.302934-36.642134c-12.680533-8.567467-28.433067-11.639467-44.1856-8.9088a7.7312 7.7312 0 0 0-6.161066 8.9088c0.682667 4.437333 4.795733 7.202133 8.9088 6.5024 11.639467-2.048 23.278933 0 32.8704 6.519467 9.591467 6.144 15.752533 15.4112 17.476266 26.368 0.682667 3.754667 4.096 6.161067 7.8848 6.161067z m46.557867-19.8656h1.365333a8.0896 8.0896 0 0 0 6.178134-9.250134c-4.4544-25.002667-18.8416-46.574933-40.7552-60.962133a100.7616 100.7616 0 0 0-74.325334-15.069867 7.7312 7.7312 0 0 0-6.161066 8.9088c0.682667 4.096 4.778667 7.185067 8.891733 6.161067 22.272-3.754667 44.885333 0.682667 63.0272 12.680533 18.158933 12.322133 30.481067 30.139733 33.911467 51.029334 0.682667 3.754667 4.096 6.5024 7.867733 6.5024z m62.0032-5.802667h1.365333a7.7312 7.7312 0 0 0 6.519467-8.925867c-7.202133-40.072533-30.1568-74.325333-64.733867-97.28-34.594133-22.9376-76.3904-31.163733-118.1696-23.9616a7.9872 7.9872 0 0 0-6.5024 8.9088c1.024 4.437333 4.778667 7.185067 9.250134 6.5024a146.039467 146.039467 0 0 1 106.837333 21.572267c31.1808 20.206933 51.729067 51.029333 57.890133 86.664533 0.682667 3.754667 4.113067 6.5024 7.543467 6.5024z"
                      fill="#FF4800" p-id="37615"></path>
                  </svg>
                </div>
              </div>
              <div class="stats-value">{{ todo.awaitFollowUp || 0 }} 个</div>
            </div>
          </div>

          <div class="stats-right-card">
            <div class="stats-card" @click="toCollectPayMoneyIndex('0')">
              <div class="stats-header">
                <h3>应收未收</h3>
                <div class="trend">
                  <svg t="1734610113549" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="38815" width="32" height="32">
                    <path
                      d="M704.232727 74.317576h106.154667c36.801939 0 81.609697 36.026182 81.609697 65.411879v750.312727c0 33.419636-25.227636 59.640242-58.088727 59.640242H292.739879c-12.412121 0-34.443636-0.03103-34.443637-59.609212v-565.682424c0-20.759273-16.570182-37.546667-36.057212-37.546667-19.48703 0-36.057212 16.787394-36.057212 37.546667v565.682424C186.181818 974.351515 226.27297 1024 292.739879 1024h541.168485C906.333091 1024 961.939394 965.538909 961.939394 890.073212V139.729455C961.939394 61.905455 879.522909 0 810.387394 0h-106.123636c-19.518061 0-35.312485 16.446061-35.312485 37.174303 0 20.697212 15.825455 37.143273 35.281454 37.143273z"
                      fill="#E3B119" p-id="38816"></path>
                    <path
                      d="M737.652364 410.282667a24.60703 24.60703 0 0 0-34.133334 0L574.060606 536.141576l-129.458424-125.858909a24.60703 24.60703 0 0 0-34.133334 0 22.993455 22.993455 0 0 0 0 33.202424l109.226667 106.185697h-90.453333a23.614061 23.614061 0 0 0-24.141576 23.272727c0 12.939636 10.798545 23.210667 24.141576 23.210667h121.576727v69.756121h-121.576727a23.614061 23.614061 0 0 0-24.141576 23.272727c0 12.939636 10.798545 23.241697 24.141576 23.241697h121.576727v70.904243c0 12.939636 10.550303 23.458909 23.893333 23.458909a23.58303 23.58303 0 0 0 23.924364-23.458909v-70.904243h120.242424c13.34303 0 24.141576-10.302061 24.141576-23.272727a23.614061 23.614061 0 0 0-24.141576-23.241697h-120.242424v-69.756121h120.242424c13.34303 0 24.141576-10.27103 24.141576-23.241697a23.614061 23.614061 0 0 0-24.141576-23.272727h-90.453333l109.226667-106.185697a22.993455 22.993455 0 0 0 0-33.202425zM97.869576 239.864242h461.110303l-61.036606 66.218667c-13.963636 15.142788-13.963636 39.718788 0 54.923636 13.963636 15.142788 36.615758 15.142788 50.641454 0l116.67394-126.510545c10.426182-6.702545 17.408-18.928485 17.408-33.078303 0-13.34303-6.206061-25.010424-15.732364-31.868121l-117.232485-127.131152A34.319515 34.319515 0 0 0 524.381091 31.030303c-9.153939 0-18.307879 3.785697-25.320727 11.388121a41.177212 41.177212 0 0 0 0 54.892606l60.571151 65.660122H97.869576C78.103273 162.971152 62.060606 179.975758 62.060606 201.448727c0 21.410909 16.042667 38.446545 35.80897 38.446546z"
                      fill="#E3B119" p-id="38817"></path>
                  </svg>
                </div>
              </div>
              <div class="stats-value">¥ {{ todo.collectionAmt || 0 }}</div>
            </div>

            <div class="stats-card" @click="toCollectPayMoneyIndex('1')">
              <div class="stats-header">
                <h3>应付未付</h3>
                <div class="trend">
                  <svg t="1734610183729" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="40818" width="32" height="32">
                    <path
                      d="M99.555556 156.444444v469.333334h824.888888V156.444444H99.555556z m519.111111 298.666667a21.333333 21.333333 0 0 1 0 42.666667H540.444444v28.444444a21.333333 21.333333 0 0 1-42.666666 0v-28.444444h-64a21.333333 21.333333 0 0 1 0-42.666667H497.777778v-42.666667h-64a21.333333 21.333333 0 0 1 0-42.666666h44.501333l-63.132444-70.243556c-8.334222-8.334222-8.334222-25.386667 0-33.720889s21.831111-10.112 30.165333-1.777777l71.111111 70.229333c1.578667 1.578667 2.588444 3.043556 3.569778 4.935111l76.487111-76.714667c8.334222-8.334222 21.831111-8.448 30.165333-0.113777s8.334222 28.885333 0 37.219555L563.498667 369.777778H618.666667a21.333333 21.333333 0 0 1 0 42.666666H540.444444v42.666667h78.222223z"
                      fill="#b9d4ff" p-id="40819"></path>
                    <path
                      d="M931.555556 632.888889A21.333333 21.333333 0 0 1 910.222222 611.555556V184.888889H128v426.666667a21.333333 21.333333 0 1 1-42.666667 0V163.555556A21.333333 21.333333 0 0 1 106.666667 142.222222h824.888889a21.333333 21.333333 0 0 1 21.333333 21.333334V611.555556a21.333333 21.333333 0 0 1-21.333333 21.333333z"
                      fill="#4E8CEE" p-id="40820"></path>
                    <path
                      d="M708.736 936.305778a21.333333 21.333333 0 0 1-21.333333-21.333334c0-121.912889 77.240889-132.238222 80.526222-132.608 0.810667-0.099556 1.621333-0.142222 2.446222-0.142222 4.778667 0 6.158222-1.507556 6.812445-2.232889 4.707556-5.176889 5.674667-18.517333 5.134222-24.177777A19.484444 19.484444 0 0 1 782.222222 753.777778V423.168c-83.811556 10.026667-109.397333 78.023111-113.777778 91.875556V654.222222a21.333333 21.333333 0 0 1-42.666666 0V512c0-1.777778 0.227556-3.555556 0.668444-5.276444 11.249778-44.088889 62.748444-127.459556 177.109334-127.459556a21.333333 21.333333 0 0 1 21.333333 21.333333V752.924444c0.497778 6.954667 1.436444 36.437333-16.142222 55.751112-9.230222 10.168889-21.816889 15.729778-36.465778 16.184888-5.048889 1.166222-42.211556 12.302222-42.211556 90.112a21.333333 21.333333 0 0 1-21.333333 21.333334zM419.555556 945.777778A21.333333 21.333333 0 0 1 398.222222 924.444444v-37.916444c0-11.946667-3.342222-20.608-10.538666-27.264-16.270222-15.089778-48.896-16.156444-58.936889-15.473778a21.333333 21.333333 0 0 1-1.649778 0.071111c-65.066667 0-85.333333-58.439111-85.333333-89.344V654.222222A21.333333 21.333333 0 1 1 284.444444 654.222222v99.555556c0.341333 7.168 4.096 46.947556 41.998223 47.416889 9.216-0.668444 58.922667-2.247111 90.24 26.766222C432.526222 842.624 440.888889 862.876444 440.888889 886.528V924.444444a21.333333 21.333333 0 0 1-21.333333 21.333334z"
                      fill="#4E8CEE" p-id="40821"></path>
                  </svg>
                </div>
              </div>
              <div class="stats-value">¥ {{ todo.payAmt || 0 }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="dashboard-charts">
        <div class="chart-container">
          <h3>销售额排行</h3>
          <el-table :data="sales" style="width: 100%" height="250">
            <el-table-column type="index" width="100" label="排名">
            </el-table-column>
            <el-table-column prop="userName" label="姓名">
            </el-table-column>
            <el-table-column prop="dealCount" label="成交量">
            </el-table-column>
            <el-table-column prop="dealAmountCount" label="成交总金额">
            </el-table-column>
          </el-table>
        </div>

        <div class="chart-container">
          <h3>成交次数客户排行</h3>
          <el-table :data="transactionsCount" style="width: 100%" height="250">
            <el-table-column type="index" width="100" label="排名">
            </el-table-column>
            <el-table-column prop="customerName" label="客户">
            </el-table-column>
            <el-table-column prop="dealCount" label="成交量">
            </el-table-column>
            <el-table-column prop="dealAmountCount" label="成交总金额">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineChartPc from "@/views/dashboard/LineChartPc.vue";
import BarChartPc from "@/views/dashboard/BarChartPc.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deptTreeSelect, getUserListByStatus } from "@/api/system/user";

import {
  statisticsProjectNumberAndTodoAndRenewed,
  statisticsPerformance,
  statisticsActualSpending,
  statisticsToDo,
  statisticsSales,
  statisticsTransactionsCount,
} from "@/api/crm/statistics";

import { toDoPage } from "@/api/flow/execute";
export default {
  name: "Index",
  components: { LineChartPc, BarChartPc, Treeselect },
  // dicts: ["sys_group"],
  computed: {
    timeOfDay() {
      const now = new Date();
      const hour = now.getHours();

      if (hour >= 0 && hour < 6) {
        return "凌晨";
      } else if (hour >= 6 && hour < 12) {
        return "上午";
      } else if (hour >= 12 && hour < 14) {
        return "中午";
      } else if (hour >= 14 && hour < 18) {
        return "下午";
      } else {
        return "晚上";
      }
    },
  },
    watch: {
    "queryParams.deptId": {
        deep: true,
        immediate: true,
        handler(val){
          this.target = val ? 1500000 : 300000
        }
    }
  },
  created() {
    this.getDeptTree();
    this.getUserListByStatus();
    this.statisticsProjectNumberAndTodoAndRenewed()
    this.toDoPage()
    this.handleQuery()
  },
  data() {
    return {
      queryParams: {
        userId: this.$store.getters.userId,
        year:  new Date().getFullYear() + "-01-01",
        deptId: undefined,
        groupId: undefined,
        quarter: undefined,
        month: undefined,
        week: undefined,
      },
      deptOptions: [],
      userList: [],
      showFilters: false,
      projectNumberAndTodoAndRenewed: {},
      performance: {},
      actualSpending: {},
      todo: {},
      sales: [],
      transactionsCount: [],
      total: 0,
      target: 0
    };
  },
  methods: {
    headerToOrderIndex(isRenewal){
      this.queryParams.requestType = '0'
      this.queryParams.isRenewal = isRenewal
      this.$router.replace({
        path: "/statistics/order",
        query: {
          queryParams: this.queryParams
        }
      });
    },
    toOrderIndex(progess){
      this.queryParams.requestType = '1'
      this.queryParams.progess = progess
      this.$router.replace({
        path: "/statistics/order",
        query: {
          queryParams: this.queryParams
        }
      });
    },
    chartToOrderIndex(progess){
      if(progess === '5'){
        this.$router.replace({
          path: "/statistics/project",
          query: {
            queryParams: this.queryParams
          }
      });
      } else {
        this.toOrderIndex(progess)
      }
    },
    toCollectPayMoneyIndex(moneyType){
      this.queryParams.moneyType = moneyType
      this.$router.replace({
        path: "/statistics/collectPayMoney",
        query: {
          queryParams: this.queryParams
        }
      });
    },
    toDoPageIndex(){
      this.$router.replace("/flow/todo");
    },
    toDoPage() {
      toDoPage({pageNum: 1, pageSize: 10}).then(response => {
        this.total = response.total;
      });
    },
    toggleFilters() {
      this.showFilters = !this.showFilters;
    },
    handleQuery() {
      this.statisticsPerformance()
      this.statisticsActualSpending()
      this.statisticsToDo()
      this.statisticsSales()
      this.statisticsTransactionsCount()
    },
    resetQuery() {
      this.queryParams = {
        userId: this.$store.getters.userId,
        year:  new Date().getFullYear() + "-01-01",
        deptId: undefined,
        groupId: undefined,
        quarter: undefined,
        month: undefined,
        week: undefined,
      };
      this.handleQuery();
    },
    // 统计商机数量、待续费数据
    statisticsProjectNumberAndTodoAndRenewed() {
      statisticsProjectNumberAndTodoAndRenewed().then(res => {
        this.projectNumberAndTodoAndRenewed = res.data
      })
    },
    // 统计业绩数据
    statisticsPerformance() {
      statisticsPerformance(this.queryParams).then(res => {
        this.performance = res.data
      })
    },
    // 统计实际支出数据
    statisticsActualSpending() {
      statisticsActualSpending(this.queryParams).then(res => {
        this.actualSpending = res.data
      })
    },
    // 统计待办数据数量
    statisticsToDo() {
      statisticsToDo(this.queryParams).then(res => {
        this.todo = res.data
      })
    },
    // 获取销售额排行
    statisticsSales() {
      statisticsSales(this.queryParams).then(res => {
        this.sales = res.data
      })
    },
    // 成交次数客户排行
    statisticsTransactionsCount() {
      statisticsTransactionsCount(this.queryParams).then(res => {
        this.transactionsCount = res.data
      })
    },
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    getUserListByStatus() {
      getUserListByStatus({ status: "0" }).then((res) => {
        this.userList = res.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.dashboard-page {
  min-height: 100vh;
}

// 头部样式
.dashboard-header {
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 20px;

  .dashboard-card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;

  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

  .greeting {
    h2 {
      font-size: 20px;
      margin-bottom: 8px;
    }

    p {
      color: #666;
      font-size: 14px;
    }
  }
}

.summary-stats {
  display: flex;
  gap: 130px;

  .stat-item {
    text-align: center;

    .label {
      display: block;
      color: #666;
      margin-bottom: 4px;
    }

    .value {
      font-size: 20px;
      font-weight: bold;
    }
  }
}

// 统计卡片样式
.stats-container {
  display: grid;
  grid-template-columns: 60% 38.5%;
  gap: 20px;
  margin-bottom: 20px;

  .stats-left {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  .stats-right {
    .stats-right-card {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
  }
}

.stats-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    h3 {
      color: #666;
      font-size: 16px;
    }
  }

  .trend {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;

    &.up {
      background: #e6f7e6;
      color: #52c41a;
    }

    &.down {
      background: #fff1f0;
      color: #f5222d;
    }
  }

  .stats-value {
    font-size: 24px;
    font-weight: bold;
  }
}

// 图表区域样式
.dashboard-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-container {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  h3 {
    margin-bottom: 20px;
    color: #333;
  }

  .chart {
    height: 300px;
  }
}

.descriptions {
  padding: 20px;
}

.descriptions label {
  font-size: 18px;
}

.descriptions:hover {
  transform: translateY(4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 15px;

  label {
    font-size: 20px;
    color: #409eff;
  }

  ::v-deep .el-descriptions-item__cell {
    font-size: 14px;
  }
}

// 筛选器区域
.filter-section {
  background: white;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

  .filter-header {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    i {
      transition: transform 0.3s;

      &.is-active {
        transform: rotate(180deg);
      }
    }
  }

  .filter-content {
    padding: 0 16px 16px;

    .el-form-item {
      margin-bottom: 12px;
    }
  }

  .filter-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;

    .el-button {
      flex: 1;
    }
  }
}

::v-deep .el-descriptions-item__cell {
  font-size: 16px;
}

.grid-content {
  margin: 12px 0;
}

.text-content {
  margin-right: 5px;
  opacity: 0.5;
}

::v-deep .el-card__header {
  padding: 5px 15px 7px;
}

::v-deep .deptInpt .el-form-item__content {
  width: 57%;
}
</style>
